import { List, InputItem, WhiteSpace, DatePicker, Button, Flex, Picker, TextareaItem  } from 'antd-mobile';
import { createForm } from 'rc-form';
import moment from 'moment';
import 'moment/locale/zh-cn';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';
import { Setting } from './Setting';
import RegionPicker from './RegionPicker'

class LoginT extends React.Component {

  constructor(props) {
      super(props);

      this.state = {
        csrq: props.record.csrq ? moment(props.record.csrq, "YYYYMMDD") : null,
        mzm: props.record.mzm ? [props.record.mzm] : '',
        xbm: props.record.xbm ? [props.record.xbm] : '',
        hfm: props.record.hfm ? [props.record.hfm] : '',
        zzmmm: props.record.zzmmm ? [props.record.zzmmm] : '',
        jgszdm: props.record.jgszdm || '',
        hkszdm: props.record.hkszdm || '',
        xyjrm: props.record.xyjrm ? [props.record.xyjrm] : '',
        ywbs: props.record.ywbs || '',
      };
  }

  onPickerChange = (val) => {
    this.props.changeCb(val);
  };

  relation = (val) => {
    if( val.length == 18 && this.state.zjlx == 1 ){
      const y = val.slice(6,10),
            m = val.slice(10,12),
            d = val.slice(12,14)
      // console.log(y+'/'+m+'/'+d)
      const date = new Date(y+'/'+m+'/'+d).getTime();
      const newVal = moment( new Date(date) ).utcOffset(8);
      this.setState({
        csrq:newVal
      })
    }

  }

  render() {
    const name = this.props.nodeName;
    const sex  = [ {value:'1',label:'男'},{value:'2',label:'女'} ],
          cardType  = [ {value:'1',label:'居民身份证'},{value:'3',label:'港澳台身份证'} ],
          marriage = [ {value:'1',label:'未婚'},{value:'2',label:'已婚'},{value:'3',label:'丧偶'},{value:'4',label:'离婚'} ],
          soldier = [ {value:'0',label:'非军人'},{value:'2',label:'军校应届本科毕业生'},{value:'3',label:'国防生'} ];

    const zhNow = moment().locale('zh-cn').utcOffset(8);
    const maxDate = moment(new Date().getFullYear()+'-12-31 +0800', 'YYYY-MM-DD Z').utcOffset(8),
          minDate = moment('1900-01-01 +0800', 'YYYY-MM-DD Z').utcOffset(8);

    // const a = moment(new Date(1489544895824)).utcOffset(8);
    // console.log(a)

    const { getFieldProps } = this.props.form;
    const { record } = this.props;

    return (
      <div className={name}>
      	<h2 className="step-title">{this.props.title}</h2>

 		    <List>
          <InputItem
            placeholder=""
            name='xm'
            defaultValue={record.xm}
          >姓名</InputItem>
        </List>

        <List>
          <InputItem
            placeholder=""
            name="xmpy"
            defaultValue={record.xmpy}
          >姓名拼音</InputItem>
        </List>
        <WhiteSpace />

        {/* <List>
          <DatePicker
            mode="date"
            title="出生日期"
            value = {this.state.csrq}
            minDate={minDate}
            maxDate={maxDate}
            onChange = { v => this.setState(Object.assign({}, this.state, { csrq: v })) }
          >
            <List.Item arrow="horizontal">出生日期</List.Item>
          </DatePicker>
          <input type="hidden" value={ this.state.csrq } name="csrq"></input>
        </List> */}

        <List>
          <Picker
            extra= "请选择"
            data= {this.props.nation}
            title= "选择民族"
            cols= {1}
            value= {this.state.mzm}
            onChange = { v => this.setState(Object.assign({}, this.state, { mzm: v })) }
          >
            <List.Item arrow="horizontal">民族</List.Item>
          </Picker>
          <input type="hidden" value={ this.state.mzm } name="mzm"></input>
        </List>
        <WhiteSpace />

        <List>
          <Picker
            data={sex}
            cols={1}
            className="forss"
            value= {this.state.xbm}
            onChange = { v => this.setState(Object.assign({}, this.state, { xbm: v })) }
            >
            <List.Item arrow="horizontal">性别</List.Item>
          </Picker>
          <input type="hidden" value={ this.state.xbm } name="xbm"></input>
        </List>
        <WhiteSpace />

        {/* <List>
          <Picker
            data={marriage}
            cols={1}
            value= {this.state.hfm}
            onChange = { v => this.setState(Object.assign({}, this.state, { hfm: v })) }
            className="forss">
            <List.Item arrow="horizontal">婚姻状况</List.Item>
          </Picker>
          <input type="hidden" value={ this.state.hfm } name="hfm"></input>
        </List>
        <WhiteSpace /> */}

        {/* <List>
          <Picker
            data={soldier}
            cols={1}
            className="forss"
            onChange = { v => this.setState(Object.assign({}, this.state, { xyjrm: v })) }
            value= {this.state.xyjrm}
          >
            <List.Item arrow="horizontal">现役军人</List.Item>
          </Picker>
          <input type="hidden" value={ this.state.xyjrm } name="xyjrm"></input>
        </List>
        <WhiteSpace /> */}

        <List>
          <Picker
            extra= "请选择"
            data= {this.props.politics}
            title= "选择政治面貌"
            cols= {1}
            onChange = { v => this.setState(Object.assign({}, this.state, { zzmmm: v })) }
            value= {this.state.zzmmm}
          >
          <List.Item arrow="horizontal">政治面貌</List.Item>
          </Picker>
          <input type="hidden" value={ this.state.zzmmm } name="zzmmm"></input>
        </List>

        <List>
          <RegionPicker
            data={this.props.nativePlace.addressArr}
            title="高考所在地"
            value={this.state.jgszdm}
            onChange={ v => this.setState(Object.assign({}, this.state, { jgszdm: v })) }
          />

          <input type="hidden" value={ this.state.jgszdm } name="jgszdm"></input>
        </List>

        {/* <List>
          <RegionPicker
            data={this.props.nativePlace.addressArr}
            title="户口所在地"
            value={this.state.hkszdm}
            onChange={ v => this.setState(Object.assign({}, this.state, { hkszdm: v })) }
          />
          <input type="hidden" value={ this.state.hkszdm } name="hkszdm"></input>
        </List> */}

        <WhiteSpace />

        <List>
          <InputItem
            placeholder=""
            name='wechat'
            defaultValue={record.wechat}
          >微信号</InputItem>
        </List>

        <WhiteSpace />

        <List renderHeader={() => '以往重要病史(限50字)'}>
          <TextareaItem
            name="ywbs"
            rows='5'
            value={this.state.ywbs}
            autoHeight
            count={50}
            placeholder="请填写以往重要病史"
            onChange={(v) => this.setState({ ywbs: v })}
          />
        </List>

      </div>
    );
  }

}

const Step4 = createForm()(LoginT);

export default Step4
